﻿<!DOCTYPE HTML>
<html>
<head>
    <title>订单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    @*<link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />*@
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
    <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        code {
            padding: 0px 4px;
            color: #d14;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <form id="searchForm" class="form-horizontal span24">
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">编号：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="no" placeholder="编号">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">会员账号：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="memberaccount" placeholder="账号">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">会员手机：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="memberphone" placeholder="手机号码">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">会员昵称：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="membernickname" placeholder="昵称">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span8">
                        <label class="control-label">会员姓名：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="membertruename" placeholder="姓名">
                        </div>
                    </div>
                    <div class="control-group span8">
                        <label class="control-label">备注：</label>
                        <div class="controls">
                            <input type="text" class="control-text" name="remark" placeholder="备注">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span12">
                        <label class="control-label">充值时间：</label>
                        <div class="controls">
                            <input type="text" class="calendar" name="startDate"><span> - </span><input name="endDate" type="text" class="calendar">
                        </div>
                    </div>
                    <div class="span3 offset2">
                        <button type="submit" id="btnSearch" class="button button-primary">搜索</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="search-grid-container">
            <div id="grid"></div>
        </div>
    </div>
    <div id="rechargeContent" class="hidden" style="display:none;">
        <form id="form" class="form-horizontal">
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">账户：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="account" data-rules="{required : true}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">金额：</label>
                    <div class="controls">
                        <input type="number" class="input-normal control-text" id="amount" data-rules="{required : true}">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">赠送金额：</label>
                    <div class="controls">
                        <input type="number" class="input-normal control-text" id="zamount">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">充值时间：</label>
                    <div class="controls">
                        <input id="date" type="text" value="@(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"))" class="calendar calendar-time">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span8">
                    <label class="control-label">备注：</label>
                    <div class="controls">
                        <input type="text" class="input-normal control-text" id="remark">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="~/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="~/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="~/assets/js/config-min.js"></script>
    <script type="text/javascript">
        BUI.use('common/page');
    </script>
    <script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201309041336"></script>
    <script type="text/javascript">
        var Grid = BUI.Grid,
            Store = BUI.Data.Store,
            columns = [
                { title: '充值编号', width: 100, sortable: false, dataIndex: 'no' },
                { title: '会员账号', width: 100, sortable: true, dataIndex: 'account' },
                { title: '充值金额', width: 100, sortable: true, dataIndex: 'amount' },
                { title: '赠送金额', width: 100, sortable: true, dataIndex: 'zamount' },
                { title: '会员昵称', width: 100, sortable: true, dataIndex: 'nickName' },
                { title: '会员姓名', width: 100, sortable: true, dataIndex: 'trueName' },
                { title: '会员手机', width: 100, sortable: true, dataIndex: 'phone' },
                { title: '充值时间', width: 100, sortable: true, dataIndex: 'date' },
                { title: '备注', width: 100, sortable: true, dataIndex: 'remark' },
            ];

        var store = new Store({
            url: '/recharge/list',
            autoLoad: true,
            pageSize: 10
        }),
            grid = new Grid.Grid({
                render: '#grid',
                loadMask: true,
                forceFit: true,
                columns: columns,
                store: store,
                plugins: [Grid.Plugins.AutoFit], //勾选插件、自适应宽度插件
                tbar: {
                    items: [{
                        btnCls: 'button button-primary button-small',
                        text: '增加',
                        handler: function () {
                            $("#form").get(0).reset()
                            rechargeDialog.show();
                        }
                    }]
                },
                // 顶部工具栏
                bbar: {
                    //items 也可以在此配置
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                }
            });

        grid.render();

        //创建表单，表单中的日历，不需要单独初始化
        var form = new BUI.Form.HForm({
            srcNode: '#searchForm'
        }).render();

        form.on('beforesubmit', function (ev) {
            //序列化成对象
            var obj = form.serializeToObject();
            obj.start = 0; //返回第一页
            store.load(obj);
            return false;
        });

        var rechargeDialog = null;
        BUI.use(['bui/overlay', 'bui/form'], function (Overlay, Form) {
            var form = new Form.HForm({
                srcNode: '#form'
            }).render();

            rechargeDialog = new Overlay.Dialog({
                title: '充值',
                width: 500,
                height: 420,
                contentId: 'rechargeContent',
                success: function () {
                    var account = $.trim($("#account").val());
                    if (account == "") {
                        BUI.Message.Alert('请输入账户', 'warning');
                        return;
                    }

                    var amount = $.trim($("#amount").val())
                    if (amount == "") {
                        BUI.Message.Alert('请输入金额', 'warning');
                        return;
                    }
                    var date = $.trim($("#date").val())
                    if (date == '') {
                        BUI.Message.Alert('请输入充值时间', 'warning');
                        return;
                    }
                    var zamount = $.trim($("#zamount").val());
                    var remark = $.trim($("#remark").val());

                    $.post("/recharge/save", {
                        account: account, amount: amount, zamount: zamount, remark: remark, date: date
                    }, function (res) {
                        if (res.success) {
                            $("#form").get(0).reset()
                            rechargeDialog.close();
                            store.load()
                        }
                        else {
                            BUI.Message.Alert('保存失败:' + res.message, 'warning');
                        }
                    })
                }
            });
        });
    </script>
</body>
</html>
